<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        .marquee {
            width: 100%;
            overflow: hidden;
            box-sizing: border-box;
            white-space: nowrap;
            display: flex;
            align-items: center;
        }
        
        .marquee-text {
            display: flex;
            align-items: center;
            animation: marquee var(--s) linear infinite;
            gap: 20px;
            &:hover {
                animation-play-state: paused;
            }
            &:not(:hover) {
                animation-play-state: running;
            }
            > div {
                &:hover{
                    color: blue;
                    cursor: pointer;
                }
            }
        }
        
        @keyframes marquee {
            0% { transform: translateX(0%); }
            /* 100% { transform: translateX(-100%); } */
            100% { transform: translateX(var(--x)); }
        }
    </style>
</head>
<body>
    <div class="marquee">
        <div class="marquee-text">
            <div>这里是跑马灯文字内容1。</div>
            <div>这里是跑马灯文字内容2。</div>
            <div>这里是跑马灯文字内容3。</div>
            <div>这里是跑马灯文字内容4。</div>
            <div>这里是跑马灯文字内容5。</div>
            <div>这里是跑马灯文字内容6。</div>
            <div>这里是跑马灯文字内容7。</div>
            <div>这里是跑马灯文字内容8。</div>
            <div>这里是跑马灯文字内容10。</div>
        </div>
    </div>

    <script>
        const marquee = document.querySelector('.marquee');
        const marqueeText = document.querySelector('.marquee-text');
        console.log(
            marquee.offsetWidth,
            marqueeText.offsetWidth,
            marqueeText.scrollWidth,
        );
        const marqueeText2 = marqueeText.cloneNode(true)
        marquee.appendChild(marqueeText2);
        marquee.style.setProperty('--x', `${
            (marqueeText.scrollWidth - marquee.offsetWidth) * -1
        }px`);
        
        marquee.style.setProperty('--s', `${
            marqueeText.children.length * 2
        }s`);
    </script>
</body>
</html>